import { getAssetsImages } from '@/utils'
import { defineComponent } from 'vue'
import styles from './decorateContent.module.less'
export default defineComponent({
  setup() {
    const booksList = [{
      path: 'book1.webp',
      title: '比邻星球',
      msg:'成长规划大全'
    },{
      path: 'book2.webp',
      title: '比邻星球',
      msg:'阅读课堂大全'
    },{
      path: 'book3.webp',
      title: '比邻星球',
      msg:'素质教育大全'
    },{
      path: 'book4.webp',
      title: '比邻星球',
      msg:'终身学习大全'
    },]
    return () => (
      <div class={styles['decorate-layout']}>
        <p class={styles['decorate-text1']}>BLIN Course book</p>
        <p class={styles['decorate-text2']}>比邻课程书籍</p>
        <div class={styles['decorate-list']}>
          {booksList.map(book => {
            return <div class={styles['bg-white']}>
              <img src={getAssetsImages(book.path)} class={styles['item-image']} alt="" />
              <p class={styles['item-text1']}>{ book.title }</p>
              <p class={styles['item-text2']}>{ book.msg }</p>
          </div>
        })}
        </div>
      </div>
    )
  }
})
